﻿
@{
    Layout = null;
    List<int> ids = new List<int>();
}

<html style="height: auto; min-height: 100%;">
<head>
    <title>趣+后台管理系统</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="/Content/AdminLTE/plugins/bootstrap/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link href="/Content/AdminLTE/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- Ionicons -->
    <link rel="stylesheet" href="/Content/AdminLTE/plugins/Ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="/Content/AdminLTE/plugins/bootstrap-daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="/Content/AdminLTE/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="/Content/AdminLTE/plugins/datatables.net-bs/css/dataTables.bootstrap.min.css">
    <!-- Theme style -->
    <link href="/Content/AdminLTE/dist/css/AdminLTE.css" rel="stylesheet">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link href="/Content/AdminLTE/dist/css/skins/skin-blue.min.css" rel="stylesheet">
    <link href="/Content/plugins/layer/skin/layer.css" rel="stylesheet">
    <link href="/Content/css/layerui/layui.css" rel="stylesheet">
    <link rel="stylesheet" href="http://localhost:49304/Content/plugins/layer/skin/layer.css" id="layui_layer_skinlayercss" style="">
</head>
<body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%;">
    <div class="wrapper" style="height: auto; min-height: 100%;">
        <div class="content-wrapper" style="min-height: 629.2px; margin:0px;">           
            <section>
                <div class="col-xs-12">
                    <div class="box box-primary">
                        <!-- form start -->
                        <form class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">
                                    <label for="title" class="col-sm-2 control-label">商品名称</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="title" placeholder="商品名称">
                                    </div>
                                    <label for="shopName" class="col-sm-2 control-label">店铺名称</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="shopName" placeholder="店铺名称">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="code" class="col-sm-2 control-label">商品编号</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="code" placeholder="商品编号">
                                    </div>
                                    <label for="category" class="col-sm-2 control-label">类别</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="category" placeholder="类别">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="inputUName" class="col-sm-2 control-label">商品类型</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" id="goodsType">
                                            <option value="-1">-请选择-</option>
                                            <option value="1">普通商品</option>
                                            <option value="3">专享商品</option>
                                        </select>
                                    </div>
                                    <label for="inputUName" class="col-sm-2 control-label">添加日期</label>
                                    <div class="col-sm-3">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right" id="startTime">
                                        </div>
                                    </div>
                                    <label style="float:left;"> - </label>
                                    <div class="col-sm-2">
                                        <div class="input-group date">
                                            <div class="input-group-addon">
                                                <i class="fa fa-calendar"></i>
                                            </div>
                                            <input type="text" class="form-control pull-right" id="endTime">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer ">
                                <button type="button" class="btn btn-primary btn-search center-block" id="btnSearch"><i class="fa fa-search"></i> 查询</button>
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>
                </div>
            </section>

            <section class="content">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-body">
                                <table id="DataList" class="table table-bordered table-striped table-hover">
                                    <thead>
                                        <tr>
                                            <th>
                                                <div align="center">
                                                    <input type="checkbox" id="all_checked" />
                                                </div>
                                            </th>
                                            <th>商品编号</th>
                                            <th width="220px">商品名称</th>
                                            <th>商品类别</th>
                                            <th>店铺名称</th>
                                            <th>添加时间</th>
                                        </tr>
                                    </thead>
                                    <tbody> </tbody>
                                </table>
                                <!-- /.table -->
                            </div>
                            <!-- /.box-body -->
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
            </section>
            <!-- /.content -->
            <input type="hidden" id="selectedIds" name="selectedIds" value="" />
        </div>
    </div>
    <script src="/Content/js/jquery.min.js"></script>
    <script src="/Content/js/common.js"></script>
    <script src="/Content/plugins/layer/layui.js"></script>
    <script src="/Content/plugins/layer/layer.min.js"></script>
    <script src="/Content/js/jquery.form.js"></script>
    <script src="/Content/plugins/validate/jquery.validate.min.js"></script>
    <script src="/Content/plugins/validate/messages_zh.min.js"></script>
    <!-- DataTables -->
    <script src="~/Content/AdminLTE/plugins/datatables.net/js/jquery.dataTables.js"></script>
    <script src="~/Content/AdminLTE/plugins/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="~/Content/AdminLTE/plugins/moment/min/moment.min.js"></script>
    <script src="~/Content/AdminLTE/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
    <script>
        var list = new Array();
        var goods_ids = getURLParameter("goods_ids");
        $(function () {
            if (goods_ids != null && goods_ids.length > 0) {
                list = goods_ids.split(',');
                //console.log(list);
            }
            //初始化表格
            GenerateTable();

            //鼠标移动到该行变色
            $('.table-hover tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                    console.log();
                }
                else {
                    u_table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });

            //搜索事件
            $("#btnSearch").on("click", function () {
                var datemin = $('#startTime').val();
                var datemax = $("#endTime").val();
                if ((datemin == null && datemax != null) || (datemin != null && datemax == null)) {
                    layer.msg('请把时间填充完整!', { icon: 1, time: 1000 });
                }
                else {
                    u_table.fnDestroy();
                    GenerateTable();
                }
            });

            $('#startTime').datepicker({
                autoclose: true
            });

            $('#endTime').datepicker({
                autoclose: true
            });
        });
        //生成表格
        function GenerateTable() {
            u_table = $('#DataList').dataTable({
                "lengthChange": false,
                "searching": false,
                "ordering": false,
                "iDisplayLength": 10,
                "bProcessing": true,
                "bServerSide": true,
                "sScrollX": true,
                "bAutoWidth": false,
                "fnServerParams": function (aoData) {
                    var goodsType = $("#goodsType").val();
                    var datemin = $('#startTime').val();
                    var datemax = $("#endTime").val();
                    var title = $("#title").val();
                    var shopName = $("#shopName").val();
                    var code = $("#code").val();
                    var category = $("#category").val();
                    aoData.push(
                        { "name": "dateMin", "value": datemin },
                        { "name": "dateMax", "value": datemax },
                        { "name": "title", "value": title },
                        { "name": "shopName", "value": shopName },
                        { "name": "code", "value": code },
                        { "name": "category", "value": category },
                        { "name": "type", "value": goodsType },
                        { "name": "status", "value": 1 }
                    );
                },
                "sAjaxSource": "/Marketing/GoodsList",
                "aoColumns": [
                    {
                        "mDataProp": 'id', "mRender": function (data, type, full) {
                            return '<div align="center"><input name="test" value="' + data + '" class="checkboxes" onclick="select1(this)" type="checkbox" /></div>';
                        }

                    },
                    { "mDataProp": 'id' },
                    {
                        "mDataProp": 'name', "mRender": function (data, type, full) {
                            return data;
                        }
                    },
                    { "mDataProp": 'categoryName' },
                    { "mDataProp": 'shopName' },
                    {
                        "mDataProp": 'add_time', "mRender": function (data, type, full) {
                            return moment(data).format("YYYY-MM-DD HH:mm:ss");
                        }
                    }
                ],
                fnDrawCallback: function (obj) {
                    var flag1 = true;
                    $("input:checkbox[class='checkboxes']").each(function () {
                        var id = $(this).val();
                        if (contain(list, id)) {
                            //console.log("选中" + id);
                            $(this).prop('checked', true);
                        } else {
                            //console.log("未选中" + id);
                            flag1 = false;
                        }
                    });

                    $("#all_checked").prop('checked', flag1);
                }
            });
        }

        //实现全选功能
        $("#all_checked").click(function () {
            $('[name=test]:checkbox').prop('checked', this.checked);//checked为true时为默认显示的状态
            var flag = $(this).prop('checked');
            $("input:checkbox[class='checkboxes']").each(function () {
                var id = $(this).val();
                //console.log(id);
                if (flag) {
                    if (!contain(list, id)) {
                        add(list, id);
                    }
                } else {
                    if (contain(list, id)) {
                        remove(list, id);
                    }
                }
            });
            var aaa = list.join();
            //$('#selectedIds').val(aaa)
            console.log(aaa);
        });

        function select1(obj) {
            var flag = $(obj).prop('checked');
            var id = $(obj).val();
            //alert(flag);
            if (flag) {
                if (!contain(list, id)) {
                    add(list, id);
                }
            } else {
                if (contain(list, id)) {
                    remove(list, id);
                }
            }
            var aaa = list.join();
            //$('#selectedIds').val(aaa)
            console.log(aaa);
        }

        var callbackdata = function () {
            var data = list.join();
            return data;
        }

        function checkboxOnclick(checkbox) {
            var nameId = checkbox.val();
            alert(nameId);
            if (checkbox.checked == true) {
            } else {

            }
        }


        /**
         * js模拟java中的List
         *
         */

        //var list = new Array();

        /**
         * 添加
         * param {Object} object
         */
        function add(list, object) {
            list[list.length] = object;
        }

        /**
         * 移除此列表中指定位置上的元素。
         * param index 指定位置
         * return 此位置的元素
         */
        function removeIndex(list, index) {
            var object = list[index];
            list.splice(index, 1);
            return object;
        }

        /**
         * 移除此列表中指定元素。
         * param object 指定元素
         * return 此位置的元素
         */
        function remove(list, object) {
            var i = 0;
            for (; i < list.length; i++) {
                if (list[i] === object) {
                    break;
                }
            }
            if (i >= list.length) {
                return null;
            } else {
                return removeIndex(list, i);
            }
        }


        function contain(list, object) {
            var i = 0;
            for (; i < list.length; i++) {
                if (list[i] === object) {
                    break;
                }
            }
            if (i >= list.length) {
                return false;
            }
            return true;
        }

        /**
         * 获得列表中指定元素。
         * param object 指定元素
         * return 此位置的元素
         */
        function get(list, index) {
            return list[index];
        }

        /**
         * 移除此列表中的所有元素。
         */
        function removeAll(list) {
            list.splice(0, list.length);
        }

        /**
         * 返回此列表中的元素数。
         * return 元素数量
         */
        function size(list) {
            return list.length;
        }


        /**
         *  如果列表不包含元素，则返回 true。
         * return true or false
         */
        function isEmpty(list) {
            return list.length == 0;
        }

    </script>

</body>
</html>
